<template>
  <div>
    <a-modal
      v-model:visible="visible"
      title="添加案件回访记录"
      :confirmLoading="loading"
      @ok="handleOk"
      :width="1200"
      style="padding: 0"
      :bodyStyle="{ padding: '20px 0' }"
    >
      <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :span="24" class="rowpd">
          <a-col :span="8">
            <a-form-item
              label="报案人姓名"
              name="alarmPerson"
              :wrapper-col="{ span: 15 }"
              :label-col="{ span: 9 }"
            >
              <a-input
                v-model:value="formState.alarmPerson"
                type="textarea"
                placeholder="输入报案人姓名"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="报案人手机"
              name="alarmMobile"
              :wrapper-col="{ span: 15 }"
              :label-col="{ span: 9 }"
            >
              <a-input-number
                style="width: 100%"
                v-model:value="formState.alarmMobile"
                type="textarea"
                placeholder="输入报案人手机"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="报案人座机"
              :wrapper-col="{ span: 15 }"
              :label-col="{ span: 9 }"
              style="width: 100%"
            >
              <a-input-number
                v-model:value="formState.alarmPhoneLeft"
                type="textarea"
                placeholder="输入报案人座机"
                style="width: 30%"
              />
              -
              <a-input-number
                v-model:value="formState.alarmPhone"
                type="textarea"
                style="width: 63%"
                placeholder="输入报案人座机"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" class="rowpd">
          <a-col :span="16" style="padding-left: 20px">
            <a-form-item
              label="报案人住址"
              name="alarmAddress"
              :wrapper-col="{ span: 20 }"
              :label-col="{ span: 4 }"
            >
              <a-input
                v-model:value="formState.alarmAddress"
                type="textarea"
                placeholder="输入报案人住址"
              />
            </a-form-item>
          </a-col>
          <a-col :span="16" style="padding-left: 20px">
            <a-form-item
              label="报案人户籍"
              name="alarmHouse"
              :wrapper-col="{ span: 20 }"
              :label-col="{ span: 4 }"
            >
              <a-input
                v-model:value="formState.alarmHouse"
                type="textarea"
                placeholder="输入报案人户籍"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <div class="splitlinesttyle"></div>
        <a-row :span="24" class="rowpd">
          <a-col :span="8">
            <a-form-item
              name="caseNo"
              label="案件编号"
              :wrapper-col="{ span: 15 }"
              :label-col="{ span: 9 }"
            >
              <a-input
                v-model:value="formState.caseNo"
                type="textarea"
                placeholder="输入案件编号"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              name="caseType"
              label="案件类别"
              :wrapper-col="{ span: 15 }"
              :label-col="{ span: 9 }"
            >
              <a-input
                v-model:value="formState.caseType"
                type="textarea"
                placeholder="输入案件类别"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              name="caseArea"
              label="发案所属社区"
              :wrapper-col="{ span: 15 }"
              :label-col="{ span: 9 }"
            >
              <a-input
                v-model:value="formState.caseArea"
                type="textarea"
                placeholder="输入发案所属社区"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" class="rowpd">
          <a-col :span="8">
            <a-form-item
              name="caseFilingDate"
              label="立案时间"
              :wrapper-col="{ span: 15 }"
              :label-col="{ span: 9 }"
            >
              <a-date-picker
                v-model:value="formState.caseFilingDate"
                @change="onChangecaseFilingDate"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="16" style="padding-left: 20px">
            <a-form-item
              name="caseBegintime"
              label="发案时段："
              :wrapper-col="{ span: 10 }"
              :label-col="{ span: 4 }"
            >
              <a-range-picker show-time v-model:value="timeArr" @change="handlecaseBegintime" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" class="rowpd">
          <a-col :span="16" style="padding-left: 20px">
            <a-form-item
              name="caseAddress"
              label="发案地点"
              :wrapper-col="{ span: 20 }"
              :label-col="{ span: 4 }"
            >
              <a-input
                v-model:value="formState.caseAddress"
                type="textarea"
                placeholder="输入报案人住址"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" class="rowpd">
          <a-col :span="8">
            <a-form-item
              name="floatingPeople"
              label="是否流动人口"
              :wrapper-col="{ span: 8 }"
              :label-col="{ span: 9 }"
            >
              <a-select
                v-model:value="formState.floatingPeople"
                placeholder="选择是否流动人口"
                style="width: 120px"
              >
                <a-select-option value="0">否</a-select-option>
                <a-select-option value="1">是</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8" style="margin-left: -20px">
            <a-form-item
              name="systemInput"
              label="是否录入社区警务平台"
              :wrapper-col="{ span: 12 }"
              :label-col="{ span: 10 }"
            >
              <a-select
                v-model:value="formState.systemInput"
                style="width: 120px"
                placeholder="选择是否录入社区警务平台"
              >
                <a-select-option value="0">否</a-select-option>
                <a-select-option value="1">是</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" class="rowpd">
          <a-col :span="24">
            <a-form-item
              name="caseContent"
              label="简要案情"
              :wrapper-col="{ span: 21 }"
              :label-col="{ span: 3 }"
            >
              <a-textarea
                v-model:value="formState.caseContent"
                placeholder="输入简要案情"
                style="min-height: 90px"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <div class="splitlinesttyle"></div>
        <a-row :span="24" class="rowpd">
          <a-col :span="8">
            <a-form-item
              name="returnVisitPersion"
              label="被回访人姓名"
              :wrapper-col="{ span: 12 }"
              :label-col="{ span: 9 }"
            >
              <a-input
                v-model:value="formState.returnVisitPersion"
                type="textarea"
                placeholder="输入被回访人姓名"
              />
            </a-form-item>
          </a-col>
          <a-col :span="16" style="margin-left: -20px">
            <a-form-item
              name="returnVisitAddress"
              label="回访地点"
              :wrapper-col="{ span: 18 }"
              :label-col="{ span: 5 }"
            >
              <a-input
                v-model:value="formState.returnVisitAddress"
                type="textarea"
                placeholder="输入回访地点"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" class="rowpd">
          <a-col :span="8">
            <a-form-item
              name="returnVisitDate"
              label="回访时间及方式"
              :wrapper-col="{ span: 12 }"
              :label-col="{ span: 9 }"
            >
              <a-input
                v-model:value="formState.returnVisitDate"
                type="textarea"
                placeholder="输入回访时间及方式"
              />
            </a-form-item>
          </a-col>
          <a-col :span="16" style="margin-left: -20px">
            <a-form-item
              name="returnVisitRelation"
              label="与被回访人关系"
              :wrapper-col="{ span: 12 }"
              :label-col="{ span: 5 }"
            >
              <a-input
                v-model:value="formState.returnVisitRelation"
                type="textarea"
                placeholder="输入与被回访人关系"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" class="rowpd">
          <a-col :span="24">
            <a-form-item
              name="returnVisitContent"
              label="回访记录"
              :wrapper-col="{ span: 21 }"
              :label-col="{ span: 3 }"
            >
              <a-textarea
                v-model:value="formState.returnVisitContent"
                placeholder="请输入回访记录"
                style="min-height: 90px"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" class="rowpd">
          <a-col :span="24">
            <a-form-item
              name="returnVisitCheck"
              label="抽查回访情况"
              :wrapper-col="{ span: 21 }"
              :label-col="{ span: 3 }"
            >
              <a-textarea
                v-model:value="formState.returnVisitCheck"
                placeholder="输入抽查回访情况"
                style="min-height: 90px"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" class="rowpd">
          <a-col :span="24">
            <a-form-item
              name="returnVisitRemark"
              label="备注"
              :wrapper-col="{ span: 21 }"
              :label-col="{ span: 3 }"
            >
              <a-textarea
                v-model:value="formState.returnVisitRemark"
                placeholder="请输入推送情况"
                style="min-height: 90px"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              name="enclosure"
              label="附件"
              :wrapper-col="{ span: 21 }"
              :label-col="{ span: 3 }"
            >
              <a-upload
                :file-list="fileList"
                :multiple="true"
                name="file"
                @change="handleChange"
                :before-upload="beforeUpload"
              >
                <a-button v-if="!fileList.length">
                  <upload-outlined></upload-outlined>
                  上传附件
                </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, toRaw } from 'vue';
import { useRouter } from 'vue-router';
import { message, notification } from 'ant-design-vue';
import { modalrules } from '../rules';
import { processReturninsert, getRetuenDetail } from '@/api/smart-tools/index';
import { UploadOutlined } from '@ant-design/icons-vue';
import request from '@/utils/request';
interface FormState {
  alarmPerson: string; //报警人
  alarmMobile: number | undefined; //报案人手机
  alarmPhone: string | undefined; //报警人固定电话
  alarmAddress: string; //报案人住址
  alarmHouse: string; //报警人户籍
  caseNo: string; //案件编号
  caseType: string; //案件类型
  caseArea: string; //案发社区
  caseFilingDate: string; //立案日期
  caseBegintime: string; //案发时间(开始)
  caseEndtime: string; //案发时间(结束)
  caseAddress: string; //案发地点
  floatingPeople: string | undefined; //流动人员0否1 是
  systemInput: string | undefined; //是否录入社区警务平台0否 1是
  caseContent: string; //案情简介
  returnVisitPersion: string; //回访人
  returnVisitAddress: string; //回访地点
  returnVisitDate: string; //回访时间
  returnVisitRelation: string; //与被回访人关系
  returnVisitContent: string; //回访内容
  returnVisitCheck: string; //回访抽查情况
  returnVisitRemark: string; //回访备注
  returnVisitFile: any; //回访附件
  processBasicId: any;
  enclosure: any;
  alarmPhoneLeft: string | undefined;
}
interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
  preview?: string;
  originFileObj?: any;
  file: string | Blob;
}

export default defineComponent({
  components: {
    UploadOutlined,
  },
  setup(props, context) {
    const loading = ref<boolean>(false);
    const url = (window as any).g.baseURL + '/processReturn/insert';
    const rules = modalrules();
    const visible = ref<boolean>(false);
    const fileList = ref<any>([]);
    const showModal = () => {
      visible.value = true;
    };
    const timeArr = ref<any>([]);
    const formRef = ref();
    const handleOk = () => {
      if (formState.value.alarmPhone && formState.value.alarmPhoneLeft) {
        formState.value.alarmPhone =
          formState.value.alarmPhoneLeft + '-' + formState.value.alarmPhone;
      }
      if (formState.value.alarmPhone && !formState.value.alarmPhoneLeft) {
        notification.error({
          message: '错误',
          description: '请输入完整座机号码',
          duration: 4,
        });
        return false;
      }
      if (!formState.value.alarmPhone && formState.value.alarmPhoneLeft) {
        notification.error({
          message: '错误',
          description: '请输入完整座机号码',
          duration: 4,
        });
        return false;
      }

      loading.value = true;
      if (fileList.value.length) {
        formState.value.enclosure = 'a';
      }
      formRef.value
        .validate()
        .then(() => {
          formState.value.processBasicId = router.currentRoute.value.query.id;
          const formData = new FormData();
          fileList.value.forEach((file: FileItem) => {
            formData.append('file', file.originFileObj);
          });
          Object.keys(formState.value).forEach(key => {
            formData.append(key, formState.value[key]);
          });

          postJsonDownload(url, formData).then(res => {
            message.success('成功!');
            visible.value = false;
            loading.value = false;
            context.emit('handleChange');
          });
        })
        .catch(error => {
          loading.value = false;
          console.log('error', error);
        });
    };
    const handlegetRetuenDetail = value => {
      getRetuenDetail(value).then(res => {
        let obj = res.data.processReturnDetail;
        timeArr.value = [obj.caseFilingDate, obj.caseEndtime];
        formState.value = res.data.processReturnDetail;
        const imgUrl =
          (window as any).g.baseURL +
          '/processReturn/download' +
          '?fileName=' +
          formState.value.returnVisitFile +
          '&processBasicId=' +
          router.currentRoute.value.query.id;
        fileList.value[0] = {
          name: formState.value.returnVisitFile,
          uid: '1',
          status: 'done',
          response: 'Server Error 500', // custom error message to show
          url: imgUrl,
        };
        console.log((formState.value.alarmPhone as string).indexOf('-'));
        if ((formState.value.alarmPhone as string).indexOf('-') != -1) {
          let arr: string[] = [];
          arr = (formState.value.alarmPhone as string).split('-');
          formState.value.alarmPhoneLeft = arr[0];
          formState.value.alarmPhone = arr[1];
        } else {
          formState.value.alarmPhone = undefined;
          formState.value.alarmPhoneLeft = '';
        }
      });
    };
    let formState = ref<FormState>({
      alarmPerson: '', //报警人
      alarmMobile: undefined, //报案人手机
      alarmPhone: '', //报警人固定电话
      alarmAddress: '', //报案人住址
      alarmHouse: '', //报警人户籍
      caseNo: '', //案件编号
      caseType: '', //案件类型
      caseArea: '', //案发社区
      caseFilingDate: '', //立案日期
      caseBegintime: '', //案发时间(开始)
      caseEndtime: '', //案发时间(结束)
      caseAddress: '', //案发地点
      floatingPeople: undefined, //流动人员0否1 是
      systemInput: undefined, //是否录入社区警务平台0否 1是
      caseContent: '', //案情简介
      returnVisitPersion: '', //回访人
      returnVisitAddress: '', //回访地点
      returnVisitDate: '', //回访时间
      returnVisitRelation: '', //与被回访人关系
      returnVisitContent: '', //回访内容
      returnVisitCheck: '', //回访抽查情况
      returnVisitRemark: '', //回访备注
      returnVisitFile: '', //回访附件
      processBasicId: '',
      enclosure: '',
      alarmPhoneLeft: '',
    });
    const onChangecaseFilingDate = (value, option) => {
      formState.value.caseFilingDate = option;
    };
    const handlecaseBegintime = (value, option) => {
      formState.value.caseBegintime = option[0];
      formState.value.caseEndtime = option[1];
    };
    const onSubmit = () => {
      console.log('submit!', toRaw(formState));
    };
    const router = useRouter();
    const handleBrak = () => {
      router.back();
    };

    const handleChange = info => {
      let resFileList = [...info.fileList];
      resFileList = resFileList.slice(-2);
      resFileList = resFileList.map(file => {
        if (file.response) {
          file.url = file.response.url;
        }
        return file;
      });
      fileList.value = resFileList;
      if (!fileList.value.length) {
        formState.value.enclosure = '';
      }
      console.log(fileList.value);
    };
    const beforeUpload = (file: FileItem) => {
      fileList.value = [...fileList.value, file];
      return false;
    };
    const postJsonDownload = (url, data) => {
      return request({
        method: 'post',
        url,
        data,
      });
    };
    return {
      visible,
      handleOk,
      showModal,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formState,
      onSubmit,
      router,
      handleBrak,
      fileList,
      headers: {
        authorization: 'authorization-text',
      },
      handleChange,
      onChangecaseFilingDate,
      handlecaseBegintime,
      handlegetRetuenDetail,
      timeArr,
      beforeUpload,
      rules,
      loading,
      formRef,
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.ant-form-item) {
  margin-bottom: 10px;
}
:deep(.ant-modal-body) {
  padding: 0;
}
.splitlinesttyle {
  width: 100%;
  height: 1px;
  margin-bottom: 10px;
  background-color: #353840;
}
.rowpd {
  padding-right: 35px;
}
</style>
